<template>
	<div class="pagination-container">
		<el-pagination :background="background" :current-page.sync="currentPage" :page-size.sync="pageSize"
			:layout="layout" :page-sizes="pageSizes" :pager-count="pagerCount" :total="total" v-bind="$attrs"
			@size-change="handleSizeChange" @current-change="handleCurrentChange" />
	</div>
</template>

<script>
	export default {
		name: 'Pagination',
		props: {
			// 为分页按钮添加背景颜色
			background: {
				type: Boolean,
				default: true
			},

			// 组件的布局
			layout: {
				type: String,
				default: 'total, sizes, prev, pager, next, jumper'
			},

			// 每页显示个数选择器:默认从5开始
			pageSizes: {
				type: Array,
				default () {
					return [5, 10, 15, 30]
				}
			},

			// 移动端页码按钮的数量端默认值5
			pagerCount: {
				type: Number,
				default: document.body.clientWidth < 992 ? 5 : 7
			},

			// 总条目数
			total: {
				required: true,
				type: Number
			},

			// 当前页码
			page: {
				type: Number,
				default: 1
			},

			// 每页显示条目个数
			limit: {
				type: Number,
				default: 5
			},
		},
		data() {
			return {};
		},
		computed: {
			currentPage: {
				get() {
					return this.page
				},
				set(val) {
					this.$emit('update:page', val)
				}
			},

			pageSize: {
				get() {
					return this.limit
				},
				set(val) {
					this.$emit('update:limit', val)
				}
			}
		},

		methods: {
			// pageSize改变触发
			handleSizeChange(val) {
				if (this.currentPage * val > this.total) {
					this.currentPage = 1
				}
				this.$emit('pagination', {
					page: this.currentPage,
					limit: val
				})
			},

			// currentPage改变触发
			handleCurrentChange(val) {
				this.$emit('pagination', {
					page: val,
					limit: this.pageSize
				})
			}
		}
	}
</script>

<style scoped>
	.pagination-container {
		background: #fff;
		padding: 32px 16px;
		text-align: center;
	}
</style>
